<template>
    <div class="forum-cover">
        <el-form 
            ref="formRef" 
            :model="form" 
            label-position="top"
            :rules="rules"
        >
            <el-form-item label="封面图" prop="cover">
                <el-upload
                    class="cover-uploader"
                    ref="uploadRef"
                    :action="uploadAction"
                    :on-success="handleCoverSuccess"
                    :before-upload="beforeCoverUpload"
                    :on-error="handleCoverError"
                    :show-file-list="false"
                    :headers="headers"
                    method="post"
                    accept=".jpg, .png, .jpeg"
                    :limit="1"
                    :on-exceed="handleExceed"
                    v-loading="loading"
                >
                    <img v-if="form.cover" :src="form.cover" class="cover-preview" />
                    <div v-else class="cover-uploader-content">
                        <p class="cover-uploader-text">上传</p>
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="帖子类型" prop="forumType">
                <el-radio-group v-model="form.forumType" @change="handleForumTypeChange">
                    <el-radio v-for="item in forumType" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, reactive, defineEmits } from 'vue';
import { ElMessage, genFileId } from 'element-plus';
import { useUserStore } from '@/stores/User';

const emit = defineEmits(['update:cover', 'update:forumType', 'formDataChanged']);
const userStore = useUserStore();
const token = userStore.userInfo?.token;
const headers = ref({});
const uploadAction = ref('https://admin.testace.cn/fenglingClient/client/uploads');
// const uploadAction = ref('http://10.6.40.37:8014/client/uploads');
const formRef = ref(null);
const loading = ref(false);
const uploadRef = ref();

const form = ref({
    cover: '',
    forumType: ''
});
const forumType = ref([
    {label: 'GMAT', value: 1},
    {label: 'GRE', value: 2},
    {label: 'EA', value: 3},
]);
const rules = reactive({
    cover: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
    forumType: [{ required: true, message: '请选择帖子类型', trigger: 'blur' }],
});

// 处理论坛类型变化
const handleForumTypeChange = (value) => {
    // emit('update:forumType', value);
    emitFormData();
};

// 上传成功回调
const handleCoverSuccess = (response, uploadFile) => {
    // 实际项目中，这里应该使用response中的图片URL
    console.log(response, 'response')
    // const imageUrl = URL.createObjectURL(uploadFile.raw);
    const imageUrl = response.data.url;
    form.value.cover = imageUrl;
    
    // 显示上传成功提示
    ElMessage.success('封面上传成功');
    
    // 向父组件传递图片数据
    // emit('update:cover', imageUrl);
    emitFormData();
    loading.value = false;
};

const handleCoverError = (error, file) => {
    ElMessage.success('封面上传失败');
    loading.value = false;
}

const handleExceed = (files, fileList) => {
    uploadRef.value.clearFiles();
    const file = files[0];
    file.uid = genFileId()
    uploadRef.value.handleStart(file);
    uploadRef.value.submit();
}

// 将整个表单数据传递给父组件
const emitFormData = () => {
    emit('formDataChanged', {
        cover: form.value.cover,
        forumType: form.value.forumType
    });
};

// 上传前校验
const beforeCoverUpload = (file) => {
    headers.value.token = token;
    const isImage = file.type.startsWith('image/');
    // const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isImage) {
        ElMessage.error('上传封面图只能是图片格式!');
    }
    loading.value = true;
    // if (!isLt2M) {
    //     ElMessage.error('上传封面图大小不能超过 2MB!');
    // }
    // return isImage && isLt2M;
    return isImage;
};
</script>
<style scoped lang="scss">
.forum-cover {
    width: 100%;
    min-height: 203px;
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
    margin-top: 10px;
    .cover-uploader {
        width: 73px;
        height: 73px;
        border-radius: 8px;
        background-color: #EEEEEE;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        
        .cover-uploader-content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .cover-uploader-text {
            text-align: center;
            line-height: 73px;
            width: 73px;
            height: 73px;
            font-size: 14px;
            color: #999999;
        }
        
        .cover-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }
    }
}
</style>